const path = require('path');
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/app.js',
  output: {
      path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"), //网站的根目录为 根目录/dist
    port: 9000, 
    inline:true, // 默认为true, 意思是，在打包时会注入一段代码到最后的js文件中，用来监视页面的改动而自动刷新页面,当为false时，网页自动刷新的模式是iframe，也就是将模板页放在一个frame中
    hot:true,
    host:"0.0.0.0"
  },
  devtool: '#cheap-module-eval-source-map',
  plugins: [
    // 热更新替换
    new webpack.HotModuleReplacementPlugin(),
    new VueLoaderPlugin()
],
module:{ 
    rules:[
        {
            test:/\.css$/,
            use:['style-loader','css-loader']
        },
        {
            test: /\.less$/,
            use: [{
                   loader: "style-loader" 
                }, {
                    loader: "css-loader" 
                }, {
                    loader: "less-loader"
                }]
        },
        { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' },
        { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
        {
            test: /\.vue$/, loader: 'vue-loader'
        },
        { test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
        { test: /\.ttf$/,  loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
        { test: /\.eot$/,  loader: "file-loader" },
        { test: /\.svg$/,  loader: "url-loader?limit=10000&mimetype=image/svg+xml" },
    ]
},

};